<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="utf-8"/>
    <title>DevProxy Virtual Hosts</title>
    <link rel="stylesheet" href="styles/popup.css">
</head>
<body class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100">
    <div class="container">
        <header class="header">
            <div class="title">
                <div class="logo">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none">
                        <!-- Main circle (proxy) -->
                        <circle cx="24" cy="24" r="10" fill="currentColor" />

                        <!-- Left side (clients) -->
                        <circle cx="8" cy="16" r="4" fill="currentColor" opacity="0.7" />
                        <circle cx="8" cy="32" r="4" fill="currentColor" opacity="0.7" />

                        <!-- Right side (servers) -->
                        <circle cx="40" cy="16" r="4" fill="currentColor" opacity="0.7" />
                        <circle cx="40" cy="32" r="4" fill="currentColor" opacity="0.7" />

                        <!-- Connection lines -->
                        <!-- Client to proxy connections -->
                        <path d="M11 18L20 22" stroke="currentColor" stroke-width="2" />
                        <path d="M11 30L20 26" stroke="currentColor" stroke-width="2" />

                        <!-- Proxy to server connections -->
                        <path d="M28 22L37 18" stroke="currentColor" stroke-width="2" />
                        <path d="M28 26L37 30" stroke="currentColor" stroke-width="2" />

                        <!-- Arrows on connection lines -->
                        <!-- Client to proxy arrows -->
                        <path d="M19 20L20 22L17 21" fill="currentColor" />
                        <path d="M19 28L20 26L17 27" fill="currentColor" />

                        <!-- Proxy to server arrows -->
                        <path d="M29 20L28 22L31 21" fill="currentColor" />
                        <path d="M29 28L28 26L31 27" fill="currentColor" />
                    </svg>
                </div>
                <h1>DevProxy</h1>
            </div>
            <div class="controls">
                <div id="theme-toggle-container">
                    <div id="theme-toggle" role="radiogroup">
                        <span id="theme-system" aria-label="System theme" role="radio" aria-checked="true" tabindex="0" data-theme="system" data-checked>
                            <svg viewBox="0 0 28 28" fill="none">
                                <path d="M7.5 8.5C7.5 7.94772 7.94772 7.5 8.5 7.5H19.5C20.0523 7.5 20.5 7.94772 20.5 8.5V16.5C20.5 17.0523 20.0523 17.5 19.5 17.5H8.5C7.94772 17.5 7.5 17.0523 7.5 16.5V8.5Z" stroke="currentColor"></path>
                                <path d="M7.5 8.5C7.5 7.94772 7.94772 7.5 8.5 7.5H19.5C20.0523 7.5 20.5 7.94772 20.5 8.5V14.5C20.5 15.0523 20.0523 15.5 19.5 15.5H8.5C7.94772 15.5 7.5 15.0523 7.5 14.5V8.5Z" stroke="currentColor"></path>
                                <path d="M16.5 20.5V17.5H11.5V20.5M16.5 20.5H11.5M16.5 20.5H17.5M11.5 20.5H10.5" stroke="currentColor" stroke-linecap="round"></path>
                            </svg>
                        </span>
                        <span id="theme-light" aria-label="Light theme" role="radio" aria-checked="false" tabindex="-1" data-theme="light">
                            <svg viewBox="0 0 28 28" fill="none">
                                <circle cx="14" cy="14" r="3.5" stroke="currentColor"></circle>
                                <path d="M14 8.5V6.5" stroke="currentColor" stroke-linecap="round"></path>
                                <path d="M17.889 10.1115L19.3032 8.69727" stroke="currentColor" stroke-linecap="round"></path>
                                <path d="M19.5 14L21.5 14" stroke="currentColor" stroke-linecap="round"></path>
                                <path d="M17.889 17.8885L19.3032 19.3027" stroke="currentColor" stroke-linecap="round"></path>
                                <path d="M14 21.5V19.5" stroke="currentColor" stroke-linecap="round"></path>
                                <path d="M8.69663 19.3029L10.1108 17.8887" stroke="currentColor" stroke-linecap="round"></path>
                                <path d="M6.5 14L8.5 14" stroke="currentColor" stroke-linecap="round"></path>
                                <path d="M8.69663 8.69711L10.1108 10.1113" stroke="currentColor" stroke-linecap="round"></path>
                            </svg>
                        </span>
                        <span id="theme-dark" aria-label="Dark theme" role="radio" aria-checked="false" tabindex="-1" data-theme="dark">
                            <svg viewBox="0 0 28 28" fill="none">
                                <path d="M10.5 9.99914C10.5 14.1413 13.8579 17.4991 18 17.4991C19.0332 17.4991 20.0176 17.2902 20.9132 16.9123C19.7761 19.6075 17.109 21.4991 14 21.4991C9.85786 21.4991 6.5 18.1413 6.5 13.9991C6.5 10.8902 8.39167 8.22304 11.0868 7.08594C10.7089 7.98159 10.5 8.96597 10.5 9.99914Z" stroke="currentColor" stroke-linejoin="round"></path>
                                <path d="M16.3561 6.50754L16.5 5.5L16.6439 6.50754C16.7068 6.94752 17.0525 7.29321 17.4925 7.35607L18.5 7.5L17.4925 7.64393C17.0525 7.70679 16.7068 8.05248 16.6439 8.49246L16.5 9.5L16.3561 8.49246C16.2932 8.05248 15.9475 7.70679 15.5075 7.64393L14.5 7.5L15.5075 7.35607C15.9475 7.29321 16.2932 6.94752 16.3561 6.50754Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M20.3561 11.5075L20.5 10.5L20.6439 11.5075C20.7068 11.9475 21.0525 12.2932 21.4925 12.3561L22.5 12.5L21.4925 12.6439C21.0525 12.7068 20.7068 13.0525 20.6439 13.4925L20.5 14.5L20.3561 13.4925C20.2932 13.0525 19.9475 12.7068 19.5075 12.6439L18.5 12.5L19.5075 12.3561C19.9475 12.2932 20.2932 11.9475 20.3561 11.5075Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </span>
                    </div>
                </div>
                <button id="settings-button" aria-label="Settings" class="help-button">
                    <span class="icon-settings"></span>
                </button>
                <button id="help-button" aria-label="Help" class="help-button">
                    <span class="icon-help"></span>
                </button>
            </div>
        </header>

        <main>
            <div class="main-header">
                <h2>Virtual Hosts</h2>
                <div class="refresh-control active" id="refresh-control" title="Click to toggle auto-refresh">
                    <span id="refresh-icon" class="icon-sync"></span>
                    <span id="status-text">Auto-refreshing</span>
                </div>
            </div>

            <!-- Loading State -->
            <div id="loading-state" class="state-container">
                <div class="spinner"></div>
                <p>Loading available virtual hosts...</p>
            </div>

            <!-- No Hosts State -->
            <div id="no-hosts-state" class="state-container hidden">
                <span class="icon-public-off"></span>
                <h3>No virtual hosts found</h3>
                <p>No virtual hosts are currently configured or available.</p>
                <button id="no-hosts-help-button" class="help-button-large">
                    <span class="icon-help"></span>
                    <span>View Configuration Help</span>
                </button>
            </div>

            <!-- Hosts List -->
            <div id="hosts-container" class="hidden">
                <!-- Dynamic content will be inserted here -->
            </div>
        </main>
    </div>


    <!-- Settings Modal -->
    <div id="settings-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Settings</h3>
                <button class="close-settings-modal" aria-label="Close modal">&times;</button>
            </div>
            <div class="modal-body">
                <h4>DevProxy Configuration</h4>
                <p>
                    Configure the URL where the extension will fetch the vhosts.json file:
                </p>
                <form id="settings-form">
                    <div class="form-group">
                        <label for="vhosts-url">vhosts.json URL:</label>
                        <input type="text" id="vhosts-url" name="vhosts-url" class="form-control" placeholder="https://localhost:8443/vhosts.json">
                    </div>
                    <div class="form-actions">
                        <button type="submit" id="save-settings" class="btn-primary">Save</button>
                        <button type="button" id="reset-settings" class="btn-secondary">Reset to Default</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="popup.js"></script>
</body>
</html>
